<template>
  <div v-if="cate === '正在热映'" class="item">
    <div class="top">
      <van-image @click="overlay" :width="rem" class="img" :src="baseURL + data.poster" />
      <div class="box" @click="total">
        <div class="info">
          <h2>{{ data.showName }}</h2>
          <van-rate :size="10" v-model="remark" allow-half color="#ffd21e" void-icon="star" void-color="#eee" />
          <span class="mark">{{ data.remark }}</span>
          <div class="text">
            <div class="ellipsis">{{ data.highlight }}</div>
            <div class="ellipsis">{{ data.leadingRole }}</div>
          </div>
        </div>
        <van-button v-if="data.openTime < '2016-12-09'" class="but" type="primary" plain color="#ee0a24"
          size="mini">购买</van-button>
        <van-button v-else class="but" type="primary" plain color="#37b7ff" size="mini">预售</van-button>
      </div>
    </div>
    <div class="bottom">
      <span class="one">1212五折狂欢</span>
      <span class="two">1212特惠抢票,名额有限抢完即止</span>
    </div>
  </div>
  <div v-else class="will">
    <van-image @click="overlay" :width="rem" class="img" :src="baseURL + data.poster" />
    <div class="info">
      <h2>{{ data.showName }}</h2>
      <span>{{ data.wantCount }}人想看</span>
      <div>导演：{{ data.director }}</div>
      <div class="zhu">主演：{{ data.leadingRole }}</div>
    </div>
    <van-button class="but" type="primary" plain color="#37b7ff" size="mini">预售</van-button>
  </div>

</template>

<script>
import { mapMutations } from 'vuex'

export default {
  name: 'Item',
  props: ['data', 'cate'],
  data() {
    return {
      baseURL: 'https://gw.alicdn.com/tfs/',
    }
  },
  computed: {
    rem() {
      return 65 / 16 + 'rem'
    },
    remark: {
      get() {
        return this.data.remark - 5
      },
      set(v) {
        this.remark = v
      }
    }
  },
  methods: {
    ...mapMutations(['changeDetailStr', 'changeOverlay', 'changeVideoSRC']),

    total() {
      this.$router.push('/total')
      this.changeDetailStr(this.data.detailStr)
    },
    overlay() {
      console.log(this.data);
      this.changeOverlay(true)
      this.changeVideoSRC({src: this.data.preview[0].ipadUrl, img: `https://gw.alicdn.com/${this.data.poster}`})
    }
  }
}
</script>

<style lang='less' scoped>
.item {
  margin-top: (10/16rem);
  padding-left: (10/16rem);

  .top {
    display: flex;

    .img {
      height: (90/16rem);
    }

    .box {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: (10/16rem);
      padding-top: (5/16rem);
      height: 100%;
      padding-bottom: (10/16rem);
      border-bottom: 1px solid #d9d9d9;

      .info {
        color: #9c9c9c;
        width: (220/16rem);

        h2 {
          font-weight: 500;
          color: #000;
        }

        .text {
          margin-top: (5/16rem);
          font-size: (13/16rem);
          line-height: (25/16rem);

          .ellipsis {
            overflow: hidden;
            white-space: nowrap;
            text-overflow: ellipsis;
          }

        }

        .mark {
          font-size: (12/16rem);
          margin-left: (5/16rem);
        }
      }

      .but {
        width: (50/16rem);
        height: (24/16rem);
        font-size: (10/16rem);
      }
    }
  }

  .bottom {
    display: flex;
    padding-left: (80/16rem);
    padding-top: (5/16rem);
    border-bottom: 1px solid #d9d9d9;
    height: (25/16rem);
    font-size: (13/16rem);

    .one {
      color: #fea54c;
      white-space: nowrap;
      // width: (90/16rem);
    }

    .two {
      margin-left: (40/16rem);
      padding-left: (5/16rem);
      height: (19/16rem);
      width: (140/16rem);
      border-left: 1px solid #d9d9d9;
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
      color: #9c9c9c;
    }
  }
}

.will {
  display: flex;
  align-items: center;
  padding: (15/16rem) 0 0 (15/16rem);

  .info {
    width: (220/16rem);
    margin-left: (10/16rem);
    font-size: (14/16rem);

    h2 {
      font-size: 1rem;
    }

    span {
      color: #fea54c;
    }

    div {
      color: #9c9c9c;
      line-height: (25/16rem);
    }

    .zhu {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }
  }

  .but {
    width: (50/16rem);
    height: (24/16rem);
    font-size: (10/16rem);
  }
}
</style>